<script lang="ts" setup>


</script>

<template>
   <div class="wrapped">
    <div class="top">
        <el-card>
         <div class="top-wrapped">
        <div class="left">
            <div class="img"></div>
            <div class="info"></div>
        </div>
        <div class="right">

        </div>
        </div>
        </el-card>
    </div>
    <div class="center">
        <el-card>
            <div class="center-wrapped">
        <div class="left"></div>
        <div class="right">
            <h4>常用管理</h4>
            <div class="a">
                <ul>
                    <li>
                        <el-link underline="false">
                         <el-icon :size="30" ><User /></el-icon>
                         <span>用户管理</span>
                        </el-link>
                    </li>
                    <li>
                        <el-link underline="false">
                    <el-icon  :size="30"><TakeawayBox /></el-icon>
                         <span>产品管理</span>
                        </el-link>
                    </li>
                    <li>
                        <el-link underline="false">
                        <el-icon  :size="30"><ChatLineSquare /></el-icon>
                           <span>系统消息</span> 
                        </el-link>
                    </li>

                    <li>
                        <el-link underline="false">
                            <el-icon :size="30"><Avatar /></el-icon>
                            <span>个人信息</span>
                        </el-link>
                    </li>
                    <li>
                        <el-link underline="false">
                        <el-icon :size="30"><Message /></el-icon>
                          <span>部门信息</span>
                         </el-link>
                    </li>
                     <li>
                        <el-link underline="never">
                            <el-icon :size="30"><Setting /></el-icon>
                           <span>系统设置</span> 
                        </el-link>
                    </li>
                </ul>
            </div>
           
        </div>
        </div>
         </el-card>
    </div>
    <div class="footer">
        <el-card>
          <div class="footer-wrapped">
         <div class="left"></div>
          <div class="right"></div>
          </div>
        
 
        </el-card>
    </div>
   </div>
</template>

<style lang="scss" scoped>
.top{

    .top-wrapped{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    }
}
.center{
    margin: 10px 0;
    .center-wrapped{
    width: 100%;
    height: 220px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .right{
        height: 100%;
        .a{
          ul{
            width: 400px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            li{
                    height: 80px;
                    width: 80px;
                    margin: 5px 10px;
                a{
                    display: block;
                    height: 80px;
                    width: 80px;
                    text-align: center;
                    justify-content: center;
                    align-self: center;
                    background-color: #f5f5f5;
                  i{
                    margin: 10px 0;
                  }
                }
            }
          }
        }
    }
    }

}


:deep(.el-link__inner){
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
:deep(.el-card__body){
  padding: 0;
}
</style>